<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link type="text/css" rel="stylesheet" th:href="@{/css/layui.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/layer.css}"/>
</head>
<body>
<form class="layui-form">

    <div class="layui-form-item">
        <label class="layui-form-label">收费项目名称</label>
        <div class="layui-input-block">
            <input type="text" name="patitemsname"   class="layui-input" id="patitemsname">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">费用类型</label>
        <div class="layui-input-block">
            <select th:name="payitemstid" lay-filter="aihao">
                <option th:each="p:${sp}" th:value="${p.payitemstid}" th:text="${p.patitemstname}"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">仪表信息</label>
        <div class="layui-input-block">
            <select th:name="metertid" lay-filter="aihao">
                <option th:each="m:${sm}" th:value="${m.metertid}" th:text="${m.meterttype}"></option>

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">执行金额</label>
        <div class="layui-input-block">
            <input type="text" name="payitemsmoney"  class="layui-input" th:id="payitemsmoney">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">使用时间</label>
        <div class="layui-input-inline">
            <input type="text" name="begintime" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">收费方案</label>
        <div class="layui-input-block">
            <select th:name="itemsid" lay-filter="aihao">
                <option th:each="i:${si}" th:value="${i.itemsid}" th:text="${i.itemsname}"></option>
            </select>
        </div>
    </div>



    <div style="margin-left: 210px">
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="tijiao">提交</button>
    </div>
</form>


<script type="text/javascript">
    layui.use(['form', 'layer', 'laydate','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,element = layui.element
            ,$=layui.jquery;
        //日期
        laydate.render({
            elem: '#date',
            trigger:'click'
        });

        //监听提交
        form.on('submit(tijiao)', function(data){
            //data.field表单所有信息
            if($("#patitemsname").val()==""){
                alert("收费名称不能为空！") ;
                return false;
            }
            if($("#payitemsmoney").val()==""){
                alert("执行金额为空！") ;
                return false;
            }
            else {
                $.post("addPay", data.field, function (result) {
                        if (result.data == false) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            })

                        }
                        else {
                            layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                },

                                function () {
                                    //刷新父页面
                                    parent.window.location.reload();
                                });
                        }
                    }
                );
            }
            return false;
        });
    });
</script>

</body>
</html>